<template>
  <div>
    <el-row class="base-info" :gutter="15">
      <el-col :span="7">
        <el-card header="汇聚总览">
          <div class="mar-t-0">
            <el-row :gutter="15">
              <el-col :span="8" class="text-center">
                <div class="fts-18">{{numberFormat(fireData.totalRecord)}}</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">汇聚数据总量(条)</div>
              </el-col>
              <el-col :span="8" class="text-center">
                <div class="fts-18">{{fireData.totalRegion}}</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">汇聚辖区(个)</div>
              </el-col>
              <el-col :span="8" class="text-center">
                <div class="fts-18">{{fireData.totalAlarm}}</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">警情总数</div>
              </el-col>
            </el-row>
          </div>
          <div class="mar-t-34">
            <el-row :gutter="15">
              <el-col :span="8" class="text-center">
                <div class="fts-18">{{fireData.totalMember}}</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">消防员(个)</div>
              </el-col>
              <el-col :span="8" class="text-center">
                <div class="fts-18">{{fireData.totalDepartment}}</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">消防救援机构(个)</div>
              </el-col>
              <el-col :span="8" class="text-center">
                <div class="fts-18">{{fireData.totalTruck}}</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">消防车辆(辆)</div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card header="当日汇聚情况">
          <div class="mar-t-0">
            <el-row :gutter="15">
              <el-col :span="12" class="text-center">
                <div class="fts-18">{{fireData.todayRecord}}</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">汇聚数据(条)</div>
              </el-col>
              <el-col :span="12" class="text-center">
                <div class="fts-18">{{fireData.todayRegion}}</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">汇聚辖区(个)</div>
              </el-col>
            </el-row>
          </div>
          <div class="mar-t-34">
            <el-row :gutter="15">
              <el-col :span="12" class="text-center">
                <div class="fts-18">{{fireData.todayMember}}</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">消防员(条)</div>
              </el-col>
              <el-col :span="12" class="text-center">
                <div class="fts-18">{{fireData.todayTruck}}</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">消防救援机构(个)</div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card header="近一个月汇聚走势图">
          <div class="w-100p h-200">
            <rs-echarts :option="line1Option"></rs-echarts>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row type="flex" :gutter="15">
      <el-col :span="7">
        <el-card header="警情等级占比情况">
          <div class="w-100p h-200">
            <rs-echarts :option="pieOption1"></rs-echarts>
          </div>
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card header="警情状态占比情况">
          <div class="w-100p h-200">
            <rs-echarts :option="pieOption2"></rs-echarts>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card header="汇聚数据总量辖区排名(TOP10)">
          <div class="w-100p h-200">
            <rs-echarts :option="barOption"></rs-echarts>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-card header="各辖区汇聚量统计">
          <avue-crud
            :data="table1Data"
            :option="table1Option"
            v-loading="table1Loading"
            @on-load="onLoad1"
            @refresh-change="onLoad1"
          >
          </avue-crud>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>
<script>
  import func from '@/util/func';
  import {
    getFireDataByAll,
    getFireDataByDay,
    getFireDataByLevel,
    getFireDataByPercent,
    getFireDataByTop,
    getFireDataByRegion
  } from '@/api/dataAggregate/dataAggregate';
  import { formatDate } from '@/filters/index'
  import { line1Option , getDataCollectCountStr , createTestData , getPre , pieOption , barOption} from './chart-option';

  import {
    catalogTop10
  } from '@/api/overview/index';

  const baseTableOption = {
    height: 'auto',
    calcHeight: 30,
    tip: false,
    header: false,
    searchShow: true,
    searchMenuSpan: 6,
    border: false,
    editBtn: false,
    addBtn: false,
    menuWidth: 350,
    dialogClickModal: false,
    menu: false
  }

  export default {
    data(){
      return {
        fireData:{
          todayMember: 0,
          todayRecord: 0,
          todayRegion: 0,
          todayTruck: 0,
          totalAlarm: 0,
          totalDepartment: 0,
          totalMember: 0,
          totalRecord: 0,
          totalRegion: 0,
          totalStart: 0,
          totalTruck: 0,
        },
        line1Option: null,
        pieOption1: null,
        pieOption2: null,
        barOption: null,

        table1Loading: false,
        table1Data: [],
        table1Option: {
          ...baseTableOption,
          column: [
            {
              label: '辖区',
              prop: 'name',
              width: 150
            },
            {
              label: '数据量(条)',
              prop: 'count'
            },
            {
              label: '警情(个)',
              prop: 'alarm'
            },
            {
              label: '特大警情(个)',
              prop: 'level4'
            },
            {
              label: '重大警情(个)',
              prop: 'level5'
            },
            {
              label: '数据总量占比',
              prop: 'percent'
            }
          ]
        }
      }
    },
    //inject: ['indexMain'],
    methods: {
      numberFormat(value) {
        let item = func.numberFormat(value,0)
        return `${item.value}${item.unit}`
      },
      getFireDataByAll() {
        getFireDataByAll().then( res => {
          if(res){
            this.fireData = res.data.data;
          }
        });
      },
      getFireDataByDay() {
        getFireDataByDay().then( res => {
          this.line1Option = line1Option(res.data.data.records)
        });
      },
      getFireDataByLevel() {
        getFireDataByLevel().then( res => {
          //this.line1Option = line1Option(res.data.data.records)
          let temp = res.data.data.map(item => {
            return {
              'value':item['count'],
              'name':item['name']
            }
          });
          this.pieOption1 = this.getOptionLevel(temp);
        });
      },
      getFireDataByPercent() {
        getFireDataByPercent().then( res => {
          //this.line1Option = line1Option(res.data.data.records)
          let temp = res.data.data.map(item => {
            return {
              'value':item['count'],
              'name':item['name']
            }
          });
          this.pieOption2 = this.getOptionStatus(temp);
        });
      },
      getFireDataByTop() {
        getFireDataByTop().then( res => {
          //this.line1Option = line1Option(res.data.data.records)
          let xData = res.data.data.map( item => {
            return item['name']
          });
          let yData = res.data.data.map( item => {
            return item['count']
          })
          this.barOption = barOption(xData,yData);
        });
      },
      getFireDataByRegion() {
        getFireDataByRegion().then( res => {
          //this.line1Option = line1Option(res.data.data.records)
          let total = 0;
          res.data.data.forEach(item => {
            total = total + item['count'];
          });
          res.data.data.forEach(item => {
            item['percent'] = `${Number((item['count'] / total) * 100).toFixed(2)}%`
          });
          this.table1Data = res.data.data;
        });
      },
      getOptionLevel(data) {
        return {
          color: ['#39a0ff' , 'rgba(57 , 160 , 255 , .5)' , '#36cbcb' , 'rgba(54 , 203 , 203 , .5)' , '#fcd77c' , 'rgba(252 , 215 , 124 , .5)'],
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '警情等级',
              type: 'pie',
              radius: '50%',
              data: data,
              label: {
                formatter: '{b}\n{c},{d}%'
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      },
      getOptionStatus(data) {
        return {
          color: ['#39a0ff' , 'rgba(57 , 160 , 255 , .5)' , '#36cbcb' , 'rgba(54 , 203 , 203 , .5)' , '#fcd77c' , 'rgba(252 , 215 , 124 , .5)'],
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '警情状态',
              type: 'pie',
              radius: '50%',
              data: data,
              label: {
                formatter: '{b}\n{c},{d}%'
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      },
      initOption(){
      },
      setDataIndex(data){
        data.forEach(
          (item , index) => {
            item['index'] = index;
          }
        )
        return data;
      },
      onLoad1(){
        // this.table1Loading = true;
        // catalogTop10().then(
        //   res => {
        //     //this.table1Data = this.setDataIndex(res.data.data || []);
        //     this.table1Loading = false;
        //   }
        // )
      },
    },
    created(){
      //this.indexMain.showMenus = false;
      this.initOption();
    },
    mounted(){
      this.getFireDataByAll();
      this.getFireDataByDay();
      this.getFireDataByLevel();
      this.getFireDataByPercent();
      this.getFireDataByTop();
      this.getFireDataByRegion();
      //this.indexMain.showMenus = false;
    }
  }
</script>
<style lang="scss">
  .mar-t-34 {
    margin-top: 34px;
  }
  .base-info {
    div {
      white-space: nowrap;
    }
  }
</style>
